<template>
    <!-- 图片橱窗 -->
    <view class="diy-window" :style="'background: ' + itemStyle.background + '; padding: ' + itemStyle.paddingTop + 'px ' + itemStyle.paddingLeft + 'px;'">
        <!-- matrix -->
        <view v-if="itemStyle.layout > -1" :class="'data-list avg-sm-' + itemStyle.layout">
            <view class="data-item" :style="'padding: ' + itemStyle.paddingTop + 'px ' + itemStyle.paddingLeft + 'px;'" v-for="(dataItem, index) in dataList" :key="index">
                <view class="item-image" @tap.stop.prevent="navigationTo" :data-url="dataItem.linkUrl">
                    <image mode="widthFix" :src="dataItem.imgUrl"></image>
                </view>
            </view>
        </view>
        <!-- display -->
        <view v-else class="display">
            <!-- 1 -->
            <view class="display-left" :style="'padding: ' + itemStyle.paddingTop + 'px ' + itemStyle.paddingLeft + 'px;'">
                <image @tap.stop.prevent="navigationTo" :data-url="dataList[0].linkUrl" :src="dataList[0].imgUrl"></image>
            </view>
            <!-- 2 -->
            <view v-if="dataList.length === 2" class="display-right" :style="'padding: ' + itemStyle.paddingTop + 'px ' + itemStyle.paddingLeft + 'px;'">
                <image @tap.stop.prevent="navigationTo" :data-url="dataList[1].linkUrl" :src="dataList[1].imgUrl"></image>
            </view>
            <!-- 3 -->
            <view v-if="dataList.length === 3" class="display-right">
                <view class="display-right1" :style="'padding: ' + itemStyle.paddingTop + 'px ' + itemStyle.paddingLeft + 'px;'">
                    <image @tap.stop.prevent="navigationTo" :data-url="dataList[1].linkUrl" :src="dataList[1].imgUrl"></image>
                </view>
                <view class="display-right2" :style="'padding: ' + itemStyle.paddingTop + 'px ' + itemStyle.paddingLeft + 'px;'">
                    <image @tap.stop.prevent="navigationTo" :data-url="dataList[2].linkUrl" :src="dataList[2].imgUrl"></image>
                </view>
            </view>
            <!-- 4 -->
            <view v-if="dataList.length === 4" class="display-right">
                <view class="display-right1" :style="'padding: ' + itemStyle.paddingTop + 'px ' + itemStyle.paddingLeft + 'px;'">
                    <image @tap.stop.prevent="navigationTo" :data-url="dataList[1].linkUrl" :src="dataList[1].imgUrl"></image>
                </view>
                <view class="display-right2">
                    <view class="left" :style="'padding: ' + itemStyle.paddingTop + 'px ' + itemStyle.paddingLeft + 'px;'">
                        <image @tap.stop.prevent="navigationTo" :data-url="dataList[2].linkUrl" :src="dataList[2].imgUrl"></image>
                    </view>
                    <view class="right" :style="'padding: ' + itemStyle.paddingTop + 'px ' + itemStyle.paddingLeft + 'px;'">
                        <image @tap.stop.prevent="navigationTo" :data-url="dataList[3].linkUrl" :src="dataList[3].imgUrl"></image>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
const app = getApp();
export default {
    data() {
        return {
            dataItem: {
                linkUrl: '',
                imgUrl: ''
            },

            linkUrl: '',
            imgUrl: ''
        };
    },
    options: {},
    /**
     * 组件的属性列表
     * 用于组件自定义设置
     */
    props: {
        itemIndex: String,
        itemStyle: Object,
        params: Object,
        dataList: Object
    },
    /**
     * 组件的方法列表
     * 更新属性和数据的方法与更新页面数据的方法类似
     */
    methods: {
        /**
         * 跳转到指定页面
         */
        navigationTo: function (e) {
            app.globalData.navigationTo(e.currentTarget.dataset.url);
        }
    },
    created: function () {}
};
</script>
<style>
@import './window.css';
</style>
